<!-- 学术消息详情 -->
<!-- 小旗子 2020/8/22日更新
		1.取消外层循环-->
<!-- 8.31
		 1.根据后台接口进行数据名称调整 接收页面数据-->
<!-- 9.2
		  1.举报按钮传参
		  2.富文本解析-->
<!-- 9.6
		1.修改弹窗内容，请求之后再将点赞收藏投币数字++
		2.修改唤起评论bug-->

<!-- 9.9 小瓜子
		1.完成删除帖子接口 -->
<!-- 9.21
		1.修改底部点赞居中样式-->
<template>
	<view class="academic_message">
		<view class="content">
			<view class="academic_header">
				<view class="academic_title">
					<text>{{normalList.title}}</text>
				</view>
				<view class="academic_date">
					<text class="date">{{postTime}}</text>
				</view>
			</view>

			<!-- 用户信息、举报按钮显示 -->
			<navigator class="userBar" hover-class="none" :url="userId == normalList.authorId ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + normalList.authorId">
				<image :src="normalList.authorAvatar" mode="aspectFill" class="user_head"></image>
				<view class="level"><Level :level="normalList.authorLevel"></Level></view>
				<view class="user_info">
					<text class="user_name">{{normalList.authorName}}</text>
					<view class="user_motto">
						{{normalList.authorDescription}}
					</view>
				</view>
				<!-- 举报，删除按钮 -->
				<ReportAndFollow class="rf" :fromWitch=2 :mycomment="mycomment" :commentId="normalList.postId" :fromSummary='true'></ReportAndFollow>
			</navigator>

			<!-- 正文内容 -->
			<view class="msg">
				<view class="">
					<jyf-parser :html="normalList.body" ref="article"></jyf-parser>
					<!-- <u-parse :content="normalList.body" noData="正在加载中..." /> -->
					<navigator 
						style="display: inline-block; font-size: 12px;"
						class="at" 
						v-for='(item,index) in normalList.ats'
						:url="userId == item.id ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + item.id">
						{{'@' + item.nickName + '&nbsp&nbsp'}}
					</navigator>
				</view>
			</view>
			<!-- 正文内容的标签 -->
			<!-- 分割线 -->
			<view class="line">
			</view>
			<!-- 日期、 点赞 留言 收藏 投币功能 -->
			<view class="active">
				<text :class="normalList.liked? 'inxupt inxupttubiao5':'inxupt inxupttubiao4'" @tap="praise">
					<text class="num">{{normalList.likeNum}}</text>
				</text>
				<text class="inxupt inxupttubiao6" @tap="solveReceive()">
					<text class="activeNum">{{normalList.commentNum}}</text>
				</text>
				<text :class="normalList.favorited? 'inxupt inxupttubiao8':'inxupt inxupttubiao7'" @tap="collect">
					<text class="num">{{normalList.favoriteNum}}</text>
				</text>
				<text :class="normalList.coined? 'inxupt inxupttubiao10':'inxupt inxupttubiao9'" @tap="reward">
					<text class="num">{{normalList.coinsNum}}</text>
				</text>
			</view>
		</view>
	</view>

</template>

<script>
	import jyfParser from "../plugins/jyf-parser/jyf-parser";
	import ReportAndFollow from "../ReportAndFollow.vue"
	import Level from '../Level.vue'
	import {_ajax} from '../../in-xupt-functions.js'
	
	export default {
		data() {
			return {
				mycomment: false,
				rewardTime: true,
				userId: undefined
			}
		},
		props: {
			normalList: {},
		},
		components: {
			ReportAndFollow,
			// uParse,
			jyfParser,
			Level
		},
		watch: {
			normalList: function(nowList, prelist) {
				nowList.likeNum = this.solveNumber(nowList.likeNum);
				nowList.coinsNum = this.solveNumber(nowList.coinsNum);
			}
		},
		mounted: function() {
			this.$props.normalList = this.$props.normalList
			this.userId = uni.getStorageSync('userId') 
			if (this.normalList.authorId == this.userId) {
				this.mycomment = true
			}
		},
		methods: {
			solveReceive: function(parentId, nick_name, replyUserId, rootId) {
				// 向评论组件传递replyUserId
				uni.$emit("setCommentId", {
					fromPostings: true
				})
			},
			solveNumber: function(num) {
				if (num >= 10000) {
					return num / 10000 + 'w';
				} else if (num >= 1000) {
					return num / 1000 + 'k';
				} else {
					return num + '';
				}
			},
			// 获取时间
			getTime: function(time) {
				return [time.getFullYear(), time.getMonth() + 1, time.getDate(), time.getHours(), time.getMinutes()]
			},
			// 点赞收藏投币功能函数
			praise: function() {
				var adr = '/post/' + this.$props.normalList.postId + '/like';
				this.$props.normalList.liked = !this.$props.normalList.liked;
				if (this.$props.normalList.liked) {
					// 点赞之后发送AJAX数字postId
					_ajax({
							url: adr,
							method: 'POST',
						})
						.then(res => {
							uni.showToast({
								icon: 'none',
								title: '点赞成功'
							});
							this.$props.normalList.likeNum++;
						})
				} else {
					// 点赞取消之后发送AJAX数字postId
					_ajax({
							url: adr,
							method: 'DELETE',
						})
						.then(res => {
							uni.showToast({
								icon: 'none',
								title: '取消成功'
							});
							this.$props.normalList.likeNum--;
						})
				}
			},
			collect: function() {
				var adr = '/post/' + this.$props.normalList.postId + '/favorite';
				this.$props.normalList.favorited = !this.$props.normalList.favorited;
				if (this.$props.normalList.favorited) {
					// 收藏之后发送AJAX数字postId
					_ajax({
							url: adr,
							method: 'POST',
						})
						.then(res => {
							uni.showToast({
								icon: 'none',
								title: '收藏成功'
							});
							this.$props.normalList.favoriteNum++;
						})
				} else {
					// 取消收藏之后发送AJAX数字postId
					_ajax({
							url: adr,
							method: 'DELETE',
						})
						.then(res => {
							uni.showToast({
								icon: 'none',
								title: '取消成功'
							});
							this.$props.normalList.favoriteNum--
						})
				}
			},
			// 8.25 投币只能投一次
			reward: function() {
				var adr = '/post/' + this.$props.normalList.postId + '/coin';
				if (!this.$props.normalList.coined) {
					_ajax({
						url: adr,
						method: 'POST'
					}).then((res) => {
						if (res.data.status == 0) {
							this.$props.normalList.coinsNum++;
							this.$props.normalList.coined = !this.$props.normalList.coined;
							this.$props.normalList.coinsNum = this.solveNumber(this.$props.normalList.coinsNum);
							uni.showToast({
								icon: "none",
								title: "感谢投币！(p≧w≦q)"
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					})
				}
			},
		},
		computed: {
			postTime: function() {
				// 得到当前时间
				let nowTime = new Date()
				// 得到评论发布时间
				let previousTime = new Date(this.$props.normalList.createTime)
				// 生成年月日时分秒数组，方便循环计算
				let nowTimeList = this.getTime(nowTime);
				let previousTimeList = this.getTime(previousTime);
				// 声明返回时带的字符串
				// let textList = [0,1,2,"小时前","分钟前"]
				// 遍历年月日时分秒数组，当有两个不相等时返回
				for (let i = 0; i <= 5; i++) {
					let delta = nowTimeList[i] - previousTimeList[i]
					if (delta != 0) {
						switch (i) {
							case 0:
								{
									// 当年份不相等返回 年份-月份-日期
									return previousTimeList[0] + '-' + previousTimeList[1] + '-' + previousTimeList[2]
								}
							case 1:
								{
									// 当月份或日不相等 返回 月份-日期
									return previousTimeList[1] + '-' + previousTimeList[2]
								}
							case 2:
								{
									// 当月份或日不相等 返回 月份-日期
									return previousTimeList[1] + '-' + previousTimeList[2]
								}
							case 3:
								{
									// 当小时不相等 返回 xx小时前
									return nowTimeList[3] - previousTimeList[3] + '小时前'
								}
							case 4:
								{
									return nowTimeList[4] - previousTimeList[4] + '分钟前'
								}
							default: return '1分钟内'
						}
					}
				}
			}
		},
	}
</script>

<style lang="less">
	/* // 消息框 */
	.academic_message {
		padding-bottom: 20rpx;
		margin: 0 auto;
		width: 750rpx;
		height: 100%;
		background-color: white;
		.content {
			padding: 20rpx;
			/*// 学术标题 */
			.academic_header {
				width: 100%;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				.academic_title {
					text {
						font-size: 50rpx;
						line-height: 50rpx;
						font-weight: bold;
					}
				}
				.academic_date {
					color: #7F7F7F;
				}
			}
			/* 用户信息 */
			.userBar {
				position: relative;
				display: flex;
				margin-bottom: 20rpx;
				.user_head {
					vertical-align: top;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					padding: 0;
				}
				.user_info {
					flex: 1;
					.user_name {
						font-size: 32rpx;
						padding-left: 16rpx;
					}
					.user_motto {
						margin-top: 10rpx;
						padding-left: 16rpx;
						font-size: 24rpx;
						color: #7f7f7f;
					}
				}
				.level {
					position: absolute;
					left: 4rpx;
					bottom: 0rpx;
				}
			
				.rf {
					position: absolute;
					top: 10rpx;
					right: 0;
				}
			}
			
			.msg {
				padding-right: 15rpx;
				margin-top: 10rpx;
				display: flex;
				// 一张图片的样式（放大显示）
				.imgBox {
					width: 300rpx;
					height: 300rpx;
					image {
						width: 300rpx;
						height: 300rpx;
					}
				}
			}
			/* // 消息框内容 */
			text {
				// letter-spacing:0.5px;
				font-size: 24rpx;
			}
			.at {
				color: #548ec2;
			}
			/* // 内容图片 */
			image {
				display: inline-block;
				margin: 0 auto;
				padding: 4rpx;
				width: 670rpx;
				height: 300rpx;
			}
			/* //分割线 */
			.line {
				margin-bottom: 10rpx;
				background-color: #F2F2F2;
				width: 700rpx;
				height: 1px;
			}
			/* //点赞投币收藏功能 */
			.active {
				display: block;
				margin-bottom: -20rpx;
				.inxupt {
					margin-left: 90rpx;
				}
				.inxupt::before {
					font-size: 32rpx;
				}
				.num {
					color: #7F7F7F;
				}
				.inxupt,
				.num {
					padding-right: 10rpx;
				}
			}
		}
	}
</style>
